<!DOCTYPE html>
<!-- saved from url=(0044)http://www.jq22.com/demo/jquery-pbl20160215/ -->
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>D-2</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/gallerybox.css">
	<style type="text/css">
		#gallery-wrapper {
		position: relative;
		max-width: 75%;
		width: 75%;
		margin:50px auto;
		}
		img.gallerybox {
		width: 100%;
		max-width: 100%;
		height: auto;
		}
		.white-panel {
		position: absolute;
		background: white;
		border-radius: 5px;
		box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
		padding: 10px;
		}
		.white-panel h1 {
		font-size: 1em;
		}
		.white-panel h1 a {
		color: #A92733;
		}
		.white-panel:hover {
		box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
		margin-top: -5px;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		}
	</style>
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>

		
		<section id="gallery-wrapper" class="wrapper" style="height: 1923px;">
			<article class="white-panel r1 c0" style="width: 226.75px; left: 0px; top: 0px;"><img src="img/1.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r1 c1" style="width: 226.75px; left: 236.75px; top: 0px;"><img src="img/2.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r1 c2" style="width: 226.75px; left: 473.5px; top: 0px;"><img src="img/3.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r1 c3" style="width: 226.75px; left: 710.25px; top: 0px;"><img src="img/4.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r2 c0" style="width: 226.75px; left: 0px; top: 257px;"><img src="img/5.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r2 c1" style="width: 226.75px; left: 236.75px; top: 577px;"><img src="img/6.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r2 c2" style="width: 226.75px; left: 473.5px; top: 322px;"><img src="img/7.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r2 c3" style="width: 226.75px; left: 710.25px; top: 327px;"><img src="img/8.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r3 c0" style="width: 226.75px; left: 0px; top: 440px;"><img src="img/9.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r3 c1" style="width: 226.75px; left: 236.75px; top: 899px;"><img src="img/10.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r3 c2" style="width: 226.75px; left: 473.5px; top: 692px;"><img src="img/11.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r3 c3" style="width: 226.75px; left: 710.25px; top: 649px;"><img src="img/12.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r4 c0" style="width: 226.75px; left: 0px; top: 623px;"><img src="img/13.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r4 c1" style="width: 226.75px; left: 236.75px; top: 1221px;"><img src="img/14.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r4 c2" style="width: 226.75px; left: 473.5px; top: 1047px;"><img src="img/15.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r4 c3" style="width: 226.75px; left: 710.25px; top: 971px;"><img src="img/16.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r5 c0" style="width: 226.75px; left: 0px; top: 946px;"><img src="img/17.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r5 c1" style="width: 226.75px; left: 236.75px; top: 1572px;"><img src="img/18.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r5 c2" style="width: 226.75px; left: 473.5px; top: 1369px;"><img src="img/19.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r5 c3" style="width: 226.75px; left: 710.25px; top: 1275px;"><img src="img/20.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
			<article class="white-panel r6 c0" style="width: 226.75px; left: 0px; top: 1290px;"><img src="img/21.jpg" class="thumbnail gallerybox" style="cursor: pointer;"></article>
        </section>

	
	<script src="js/jquery.min.js.下载"></script><script src="js/jquery.min.js(1).下载"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="js/pinterest_grid.js.下载"></script>
	<script src="js/jquery.gallerybox.js.下载"></script>
	<script type="text/javascript">
		//瀑布流插件
		$(function(){
			$("#gallery-wrapper").pinterest_grid({
				no_columns: 4,
                padding_x: 10,
                padding_y: 10,
                margin_bottom: 50,
                single_column_breakpoint: 700
			});
			
		});
	</script>
	<script type="text/javascript">
		//图片画廊插件
		$(function(){
			$(".gallerybox").gallerybox({
				bgColor:"#d2527f",
				bgOpacity:0.85
			});
		});
	</script>

</body></html>